<template>
  <div class="damage-compensation-container">
    <div class="page-header">
      <div class="title">损坏赔偿处理</div>
      <div class="subtitle">档案损坏评估与赔偿管理</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/borrow-system"><AuditOutlined />档案借阅系统</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><ExclamationCircleOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="content-section">
      <a-card title="损坏赔偿案例" :bordered="false">
        <div class="actions-bar" style="margin-bottom: 16px">
          <a-button type="primary">新建案例</a-button>
        </div>

        <a-table :columns="damageColumns" :data-source="damageCases" :pagination="{ pageSize: 10 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'severity'">
              <a-tag :color="getSeverityColor(record.severity)">{{ record.severity }}</a-tag>
            </template>
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small">查看</a-button>
                <a-button size="small">处理</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HomeOutlined, FolderOutlined, AuditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'

const damageColumns = [
  { title: '案例编号', dataIndex: 'caseId', key: 'caseId' },
  { title: '借阅者', dataIndex: 'borrower', key: 'borrower' },
  { title: '档案名称', dataIndex: 'fileName', key: 'fileName' },
  { title: '损坏程度', key: 'severity' },
  { title: '评估金额', dataIndex: 'estimatedAmount', key: 'estimatedAmount' },
  { title: '报告时间', dataIndex: 'reportTime', key: 'reportTime' },
  { title: '状态', key: 'status' },
  { title: '操作', key: 'action', width: 150 }
]

const damageCases = ref([
  {
    caseId: 'DC20231201001',
    borrower: '张三丰',
    fileName: '太极心法秘籍',
    severity: '轻微',
    estimatedAmount: '500功德',
    reportTime: '2023-12-01',
    status: '待评估'
  },
  {
    caseId: 'DC20231130001',
    borrower: '武当七侠',
    fileName: '武当剑谱',
    severity: '严重',
    estimatedAmount: '3000功德',
    reportTime: '2023-11-30',
    status: '已赔偿'
  },
  {
    caseId: 'DC20231129001',
    borrower: '张无忌',
    fileName: '九阳神功',
    severity: '中等',
    estimatedAmount: '1500功德',
    reportTime: '2023-11-29',
    status: '评估中'
  }
])

const getSeverityColor = (severity) => {
  const colorMap = {
    轻微: 'green',
    中等: 'orange',
    严重: 'red'
  }
  return colorMap[severity] || 'default'
}

const getStatusColor = (status) => {
  const colorMap = {
    待评估: 'default',
    评估中: 'processing',
    已赔偿: 'success',
    争议中: 'warning'
  }
  return colorMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.damage-compensation-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .content-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }
}
</style>
